<template>
  <div class="user-wrapper user-vip">
    <div class="user-title">
      <van-button
        class="btn-back"
        icon="arrow-left"
        :to="{ name: 'user' }" />
      {{ $t('User.vip') }}
    </div>
    <!-- 用户信息 -->
    <div class="user-overview">
      <div class="avatar">
        <img src="../../assets/images/tcb-logo.png" alt="" class="avatar-img">
      </div>
      <div class="user-name">
        <p class="nickname">{{ username }}</p>
        <p class="vip-expires">{{ $t('User.vip_expires') }}：{{ expiresTime }}</p>
      </div>
      <i class="icon-upgrade"></i>
    </div>
    <!-- vip 价格 -->
    <div class="vip-price">
      <div class="vip-buy user-selected">
        <p class="long">{{ $t('User.vip_1_level') }}</p>
        <p class="price">
          <strong>¥</strong>
          <span>199</span>
        </p>
      </div>
      <div class="vip-buy">
        <p class="long">{{ $t('User.vip_2_level') }}</p>
        <p class="price">
          <strong>¥</strong>
          <span>199</span>
        </p>
      </div>
    </div>
    <!-- 特权 -->
    <div class="vip-privilege">
      <div class="privilege-title">
        <i class="icon-privilege"></i>
        {{ $t('User.vip_privilege') }}
      </div>
      <ul class="privilege-list">
        <li v-for="index in 8" :key="index">
          <i :class="`icon-${index}`"></i>
          <div class="dt">{{ $t(`User.privilegeList[${index}].dt`) }}</div>
          <div class="dd">{{ $t(`User.privilegeList[${index}].dd`) }}</div>
        </li>
      </ul>
    </div>
    <div class="buy-vip">
      <van-button class="block-btn" @click="showPopup=true">{{ $t('User.vip_upgrade') }}</van-button>
    </div>

    <!-- 支付弹窗 -->
    <user-pay-popup :show-popup="showPopup"></user-pay-popup>
  </div>
</template>

<script>
import UserPayPopup from '../../components/UserPayPopup';

export default {
  components: {
    UserPayPopup,
  },
  data () {
    return {
      username: '',
      expiresTime: '2020-05-02',
      showPopup: false,
    };
  },
  created () {

  },
  methods: {
    // 确认支付
    confirmPay() {

    }
  }
};
</script>

<style lang="less" scoped>
  .user-vip{padding-bottom: 180px;}
  .user-overview{
    display: flex;
    position: relative;
    padding:30px 40px;
    background: #fff;
  }
  .avatar{
    width: 120px;
    height: 120px;
    overflow: hidden;
    border-radius: 50%;
  }
  .avatar-img{
    max-width: 100%;
    max-height: 100%;
  }
  .user-name{
    margin-left: 30px;
  }
  .nickname{
    font-weight:bold;
    font-size:@font-size-lg;
    color:rgba(51,51,51,1);
    width: 300px;
    height:34px;
    line-height:34px;
    margin:10px 0 14px;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }

  .vip-expires{
    height:36px;
    line-height:36px;
    font-size:@font-size-sm;
    color: #999;
  }
  .icon-upgrade{
    width: 86px;
    height:66px;
    margin-left: auto;
    margin-top: 20px;
    background: url(../../assets/images/icon-vip@2x.png) no-repeat;
    background-size: cover;
  }
  .vip-price{
    display: flex;
    margin: 50px 40px;
    justify-content: space-between;
  }
  .vip-buy{
    width:310px;
    height:136px;
    position: relative;
    font-weight:bold;
    background:rgba(205,205,205,1);
    border-radius:20px;
    text-align: center;
    overflow: hidden;
    color: #fff;
    &:before,
    &:after{
      content: '';
      position: absolute;
      border-radius:50%;
      background:#d9d9d9;
    }
    &:before{
      width:76px;
      height:72px;
      left: -10px;
      top: -10px;
    }
    &:after{
      width:104px;
      height:104px;
      right: -10px;
      bottom: -80px;
    }
  }
  .long{
    font-size:@font-size-sm;
    line-height:40px;
    margin-top: 10px;
  }
  .price{
    font-size:46px;
    line-height:80px;
    strong{margin-right: 16px;}
  }
  .user-selected{
    background:linear-gradient(-35deg,rgba(251,177,17,1) 0%,rgba(251,204,17,1) 100%);
    &:before,
    &:after{background: #f3d867;}
  }
  .vip-privilege{
    padding:0 40px;
    background:#fff;
  }
  .privilege-title{
    text-align: center;
    padding: 26px 0 10px;
    font-weight:bold;
    font-size:@font-size-md;
    font-family:PingFang SC;
    position: relative;
    color:@orange;
    &:before,
    &:after{
      content: '';
      height: 2px;
      width: 200px;
      top: 50px;
      position: absolute;
      background:rgba(251,206,17,.4);
    }
    &:before{left: 20px;}
    &:after{right: 20px;}
    .icon-privilege{
      width: 62px;
      height: 50px;
      display: inline-block;
      vertical-align: middle;
      background: url('../../assets/images/icon-vip-s@2x.png') no-repeat;
      background-size: cover;
    }
  }
  /* 循环生成小图标 */
  .loop( @i )when( @i > -1 ){
    .icon-@{i}{
      background-image: url('../../assets/images/icon-@{i}@2x.png');
    }
    .loop((@i - 1));
  }

  .privilege-list{
    padding-bottom: 20px;
    li{
      background:#fbfbfb;
      border-radius:12px;
      position: relative;
      padding:16px 0 16px 144px;
      margin-top: 16px;
      line-height: 40px;
      font-size:@font-size-md;
      color: #333;
    }
    .dt{font-weight:bold;}
    .dd{
      margin-top: 10px;
      font-family: 'PingFang-SC-Regular';
      font-size:@font-size-sm;
      color: #999;
    }
    .loop(8);
    i{
      width: 50px;
      height: 50px;
      position: absolute;
      top: 44px;
      left: 50px;
      background-repeat: no-repeat;
      background-size: contain;
    }
  }
  .buy-vip{
    position: fixed;
    bottom: 0;
    left: 50%;
    width: 750px;
    transform: translate(-375px, 0);
    z-index: 10;
    text-align: center;
    padding: 40px 90px 50px;
    background: #fbf8f9;
  }
</style>
